Teste roberta by rob364 · Pull Request #1 · wlsf82/EngageSphere-Test-Design-Masterclass-Turma-4

rob364 · 2025-03-15T01:35:18Z

Foram feitas as alterações sugeridas pelo Walmyr!

✅ Descrição das alterações

Este PR adiciona uma bateria de testes automatizados para o projeto EngageSphere, cobrindo as camadas API e GUI com foco em confiabilidade e boas práticas de teste com Cypress.

🧪 Testes de API

Verifica o status 200 na recuperação de clientes.
Confirma que a API retorna 10 clientes por página.
Valida que a paginação retorna corretamente a currentPage.

🖥️ Testes de GUI

Verifica a saudação padrão e personalizada ("Hi there!" e "Hi Joe").
Garante a visibilidade e integridade do rodapé com todos os links.
Valida que filtros de tamanho e indústria são aplicados corretamente e mantidos ao navegar de volta.
Testa o botão "Back" na visualização de detalhes do cliente.

wlsf82 · 2025-03-15T09:55:09Z

@rob364, antes mesmo de iniciar a revisão, recomendo escrever melhores mensagens de commit visto que estas ajudam o revisor do código entender cada mudança.

Por exemplo: a mensagem Adicionada nova funcionalidade X deveria ser algo como Install and configure Cypress, uma vez que é isso que tal commit faz.

Outro exemplo: a mensagem criação de data-test p table e incremento no testes de API dá a impressão de que mudanças foram feitas no frontend neste commit, quando na verdade tal commit somente fez alterações em arquivos de testes.

Por fim, a mensagem Ultimas alterações não trás significado algum.

Para aprender como escrever boas mensagens de commit, recomendo o seguinte conteúdo: How to Write a Git Commit Message.

wlsf82

Bom trabalho @rob364! 🎉

No entanto, deixei uma série de comentários ao longo do seu código, os quais creio que lhe ajudarão a melhorar bastante o design do mesmo.

Obs.: Só faça novas alterações depois do encontro de hoje da Test Design Masterclass.

wlsf82 · 2025-03-15T10:02:21Z

@@ -0,0 +1,45 @@
+describe("EngageSphere - Interface Inicial API", () => {


Suítes de testes devem possuir descrições curtas e direto-ao-ponto.

Segue minha sugestão para a suíte de testes de API.

Suggested change

describe("EngageSphere - Interface Inicial API", () => {

describe("EngageSphere API", () => {

A propósito, por qual motivo você criou a pasta Testes/ dentro de cypress/e2e/ se a pasta e2e/ já é a pasta onde armazena-se os testes?

Além disso, o nome do arquivo de teste conter a palavra Teste é redundante visto que é óbvio que isso é uma suíte de testes.

Minha sugestão é que dentro da pasta cypress/e2e/ haja uma pasta chamada gui/ para os testes de interface gráfica de usuário e outra pasta chamada api/ para os testes de application programming interface.

No fim, a estrutura de arquivos de testes poderia ser assim:

cypress/e2e/gui/EngageSphere.cy.js para os testes de GUI da aplicação EngageSphere

cypress/e2e/api/EngageSphere.cy.js para os testes de API da aplicação EngageSphere

wlsf82 · 2025-03-15T10:05:21Z

+
+  beforeEach(() => {
+    cy.visit("/");
+    cy.get('[data-test="accept-button"]').click();


Em vez da adição do atributo data-test no botão de aceitar os cookies, você poderia simplesmente ter feito algo como o seguinte:

cy.contains('button', 'Accept').click()

Tal seletor é legível e não exigiria mudança no código do frontend.

Uma alternativa melhor ainda seria definir o cookie programaticamente.

Assim:

cy.setCookie('cookieConsent', 'accepted')

Dessa forma, não precisa-se perder tempo clicando no botão de aceitar cookies para testes onde isso é só uma pré-condição, não o alvo do teste.

Vale lembrar que o comando cy.setCookie deve ser executado antes do cy.visit.

wlsf82 · 2025-03-15T10:10:28Z

@@ -0,0 +1,45 @@
+describe("EngageSphere - Interface Inicial API", () => {
+


Esta linha em branco só adiciona uma nova linha no código sem nenhum ganho real.

Por que tal prática fere um bom design de testes?

Em vez de ajudar na legibilidade do código, tal prática piora a mesma, visto que torna os
arquivos maiores do que o necessário.

Sugestão com um melhor design

Não deixe linhas em branco no início do arquivo, nem mais de uma linha entre diferentes
“coisas” (ex.: blocos it, beforeEach, context, etc.). Uma linha em branco (abaixo) já é o suficiente
para deixar a suíte de testes legível.

Veja um exemplo.

describe('EngageSphere', () => { beforeEach(() => { cy.visit('/') }) it('shows the default greeting (i.e., Hi, there...)', () => { // Test implementation here }) it('shows the customized greeting (i.e., Hi, Joe...)', () => { // Test implementation here }) // Outros casos de teste aqui... })

wlsf82 · 2025-03-15T11:11:27Z

@@ -1,3 +1,90 @@
+// import { useState } from 'react'


Por qual motivo você comentou esse monte de código?

wlsf82 · 2025-03-15T11:13:12Z

+        <th scope="col">ID</th>
+        <th scope="col">Company name</th>
+        <th scope="col">Industry</th>
+        <th scope="col" onClick={sortNumberOfEmployeesHandler} data-test="sort-employees-header">


Você adicinou vários atributos data-test que nem mesmo estão em uso.

Código não utilizado é complexidade adicional.

Um bom design de código é um código que remove complexidade, não que adiciona.

wlsf82 · 2025-03-15T11:14:00Z

+                aria-label={`View company: ${customer.name}`}
+                key={customer.id}
+                onClick={() => customerActionClickHandler(customer)}
+                data-test={`view-customer-${index}`}


Em vez desse atributo data-test, o comando cy.contains('button', 'View') já resolveria o problema sem a necessidade de alteração no código do frontend.

wlsf82 · 2025-03-15T11:15:12Z

    "start:frontend": "cd frontend && npm start",
-    "start:server": "cd backend && npm start"
+    "start:server": "cd backend && npm start",
+    "test:e2e": "start-server-and-test \"npm run start:server\" 3001 \"npm run start:frontend\" 3000 \"npx cypress open\""


Esse comando não funciona visto que faltou instalar a biblioteca start-server-and-test como uma dependência de desenvolvimento, ou seja, não está listada nas devDependencies.

wlsf82 · 2025-03-15T11:16:02Z

  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "cypress": "^14.1.0"


Que tal fazer o upgrade para a versão 14.2.0, lançada no dia 12/03/2025?

Fonte: https://docs.cypress.io/app/references/changelog#14-2-0

…be Api/Edit nome descirbe Gui

…tus 200

rob364 · 2025-03-21T02:17:17Z

Foram feitas as alterações sugeridas pelo Walmyr!

✅ Descrição das alterações

Este PR adiciona uma bateria de testes automatizados para o projeto EngageSphere, cobrindo as camadas API e GUI com foco em confiabilidade e boas práticas de teste com Cypress.

🧪 Testes de API

Verifica o status 200 na recuperação de clientes.
Confirma que a API retorna 10 clientes por página.
Valida que a paginação retorna corretamente a currentPage.

🖥️ Testes de GUI

Verifica a saudação padrão e personalizada ("Hi there!" e "Hi Joe").
Garante a visibilidade e integridade do rodapé com todos os links.
Valida que filtros de tamanho e indústria são aplicados corretamente e mantidos ao navegar de volta.
Testa o botão "Back" na visualização de detalhes do cliente.

wlsf82

Bom trabalho@rob364! 👏🏻 👏🏻

No entanto, deixei mais comentários os quais creio que lhe ajudarão a melhorar o design dos testes.

Lembre-se se só fazer novas alterações após o terceiro encontro da Test Design Masterclass da TAT.

wlsf82 · 2025-03-21T15:40:35Z

+
 # misc
 .DS_Store
+cypress/fixtures/


As pastas cypress/fixtures/ e cypress/support/ não devem ser listadas no arquivo .gitignore.

Em vez disso, se você não vai as utilizar, deve atualizar o arquivo de configurações com as opções fixtureFolder: fase e supportFile: false, deletá-las e mais nada.

wlsf82 · 2025-03-21T15:41:00Z

 .DS_Store
+cypress/fixtures/
+/Lixo
+/bash.exe.stackdump


E esse arquivo?

wlsf82 · 2025-03-21T16:37:49Z

@@ -0,0 +1 @@
+import './commands'


Faltou deletar este arquivo também.

wlsf82 · 2025-03-21T16:38:24Z

        </div>
      )}
-      <Button text="Back" onClick={onClick} />
+      <Button text="Back" onClick={onClick} datatest="button-back" />


Esse datatest não é necessário, visto que é possível selecionar o botão com o comando cy.contains('button', 'Back').

wlsf82 · 2025-03-21T16:38:50Z

            <td>{customer.employees}</td>
            <td>{customer.size}</td>
-            <td onClick={() => customerActionClickHandler(customer)}>
+            <td onClick={() => customerActionClickHandler(customer)} >


Qual o motivo dessa mudança?

wlsf82 · 2025-03-21T16:38:56Z

+            <td onClick={() => customerActionClickHandler(customer)} >
              <strong>
-                <button aria-label={`View company: ${customer.name}`} key={customer.id} onClick={() => customerActionClickHandler(customer)}>
+                <button aria-label={`View company: ${customer.name}`} key={customer.id} onClick={() => customerActionClickHandler(customer)} >


wlsf82 · 2025-03-21T16:39:14Z

+
+
+
+// import { useState } from 'react'


E esse monte de código do frontend comentado?

brunonf15

Bom trabalho Roberta! Segue umas sugestões

brunonf15 · 2025-03-21T15:01:38Z

 }

 export default Table
+


Remover esses códigos comentados

robertaGreenlegis added 5 commits March 8, 2025 17:38

Adicionada nova funcionalidade X

d47c045

1º e 2º casos de teste, criação de datatest cookes

f9e12bf

[UsuariosV2] Ajuste nos data-test da tabela

561c825

criação de data-test p table e incremento no testes de API

1447a47

Ultimas alterações

b92e6a3

wlsf82 requested changes Mar 15, 2025

View reviewed changes

robertaGreenlegis added 15 commits March 15, 2025 21:11

Adicionando a pasta fixtures ao .gitignore

847262d

Atualizando Cypress para a versão 14.2.0

cc735b7

Colocando coamndo para rodar aquivo no lugar correto/Edit nome Descri…

fd1160f

…be Api/Edit nome descirbe Gui

Adicionado arquivo lixo ao gitignore

182f424

Adcionando maneira correta para rodar os testes no cypress

b1c8865

Adcionando setCookie button de cookie

3e41942

Teste Api-Recupera 10 clientes com sucesso e verifica o código de sta…

3eb4180

…tus 200

Teste Api-Recupera 10 clientes com sucesso e verifica o código de sta…

ba028c9

…tus 200

Realiza a paginação de clientes corretamente

f1f39ce

Subindo testes de API e também GUI

b7de326

Subindo testes de API e também GUI

2674fdd

Subindo testes de API e também GUI

61ed3d0

Remove a pasta Lixo do repositório e adiciona ao .gitignore

2609361

Remove a pasta Lixo do repositório e adiciona ao .gitignore

8d2dba9

Ajustes sugeridos pelo gitcopilot

d98f0ae

wlsf82 requested changes Mar 21, 2025

View reviewed changes

brunonf15 suggested changes Mar 22, 2025

View reviewed changes

		@@ -0,0 +1,45 @@
		describe("EngageSphere - Interface Inicial API", () => {

	describe("EngageSphere - Interface Inicial API", () => {
	describe("EngageSphere API", () => {

		@@ -0,0 +1 @@
		import './commands' No newline at end of file

Conversation

rob364 commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wlsf82 commented Mar 15, 2025

Uh oh!

wlsf82 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Por que tal prática fere um bom design de testes?

Sugestão com um melhor design

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rob364 commented Mar 21, 2025

Uh oh!

wlsf82 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brunonf15 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rob364 commented Mar 15, 2025 •

edited

Loading